<template>
  <div class="userDisPath">
    <div>
      <h3>
        用户姓名：
        <span v-if="main.orderListVO">{{main.orderListVO.userName}}</span>
      </h3>
      <div class="list">
        <span>证件号码：</span>
        <span v-if="main.orderListVO" class="text">{{main.orderListVO.paper}}</span>
      </div>
      <div class="list">
        <span>手机号码：</span>
        <span v-if="main.orderListVO" class="text">{{main.orderListVO.mobile}}</span>
      </div>
      <!-- <div class="list">
        <span>用户地区：</span>
        <span class="text">{{address}}</span>
      </div>-->
    </div>
    <div>
      <h3>用户保单/服务单</h3>
      <el-table :data="baodanlist" align="center">
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="userName" label="投保人姓名"/>
        <el-table-column prop="mobile" label="投保人电话"/>
        <el-table-column prop="userName" label="被保人姓名"/>
        <el-table-column prop="mobile" label="被保人电话"/>
        <el-table-column prop="goodsName" label="所属产品"/>
        <el-table-column prop="beginTime" label="生效起期"/>
        <el-table-column prop="endTime" label="生效至期"/>
        <el-table-column prop="status" label="当前状态"/>
        <el-table-column prop="youServers" label="绑定服务"/>
        <!-- <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick()" type="text" size="small">查看</el-button>
            </template>
        </el-table-column>-->
      </el-table>
    </div>
    <h3 class="title">
      派单类型：
      <span>{{main.productName}}</span>
    </h3>
    <div class="info">
      <h3>服务预约信息</h3>
      <div class="list">
        <div class="left">预约手机号:</div>
        <div v-if="main.template">{{main.template.bookMobile}}</div>
      </div>
      <div class="list">
        <div class="left">所患疾病:</div>
        <div v-if="main.template">
          <span v-if="main.template.sickType==1">意外</span>
          <span v-if="main.template.sickType==2">疾病</span>
          <span v-if="main.template.sickType==3">重疾</span>
          -
          {{main.template.sickName}}
        </div>
      </div>
      <div class="list">
        <div class="left">所在地区:</div>
        <div v-if="main.template">{{main.template.provinceValue}}-{{main.template.cityValue}}-{{main.template.countryValue}}</div>
      </div>
      <div class="list">
        <div class="left">期望就诊地区:</div>
        <div v-if="main.template">{{main.template.wantProvinceValue}}-{{main.template.wantCityValue}}-{{main.template.wantCountryValue}}</div>
      </div>
      <div class="list">
        <div class="left">预约医院:</div>
        <div v-if="main.template">{{main.template.hospitalName}}</div>
      </div>
      <div class="list">
        <div class="left">预约科室:</div>
        <div v-if="main.template">{{main.template.dept1Value}} {{main.template.dept2Value}}</div>
      </div>
      <div class="list">
        <div class="left">指定医生:</div>
        <div>{{docName}}</div>
      </div>
      <div class="list hos-state">
        <div class="left">住院状态:</div>
        <div class="right">
          <div v-if="main.template">{{main.template.enterHospitalState}}</div>
          <div class="item">
            <span>住院时间：</span>
            <span v-if="main.template">{{main.template.enterHospitalTime |formatDate}}</span>
          </div>
          <div class="item">
            <span>已交费用：</span>
            <span v-if="main.template">{{main.template.payMoney}}</span>
          </div>
          <div class="item">
            <span>催缴费用：</span>
            <span v-if="main.template">{{main.template.needMoney}}</span>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="left">社保状态:</div>
        <div v-if="main.template">{{main.template.sheBaoStateValue}}</div>
      </div>
      <div class="list">
        <div class="left">社保所在地区:</div>
        <div v-if="main.template">{{main.template.sheBaoProvinceValue}}-{{main.template.sheBaoCityValue}}-{{main.template.sheBaoCountryValue}}</div>
      </div>
      <div class="list">
        <div class="left">本次社保直结:</div>
        <div v-if="main.template">{{main.template.sheBaoPay==true?'是':'否'}}</div>
      </div>
      <div class="list">
        <div class="left">新农合盖章:</div>
        <div v-if="main.template">{{main.template.nongHeSign==true?'是':'否'}}</div>
      </div>
      <div class="list">
        <div class="left">用户备注:</div>
        <div v-if="main.template">{{main.template.remark}}</div>
      </div>
      <div class="list">
        <div class="left"></div>
        <div>
          <el-button @click="dispath">确认并派单</el-button>
          <el-button @click="cancle">返回修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userDetailInfo } from "../../../../data/userManage";
import { ScondDay } from "utils/formData";
export default {
  name: "userDisPath",
  data() {
    return {
      main: {},
      baodanlist: [],
      liveHosState: [],
      docName: ""
    };
  },
  mounted() {
    this.getDict("12"); //住院状态
    this.detail();
  },
  methods: {
    detail() {
      this.api
        .get(`/productOrder/${this.$route.query.mainId}`)
        .then(res => {
          if (res.code == 200) {
            res.data.orderListVO.beginTime = ScondDay(
              res.data.orderListVO.beginTime
            );
            res.data.orderListVO.endTime = ScondDay(
              res.data.orderListVO.endTime
            );
            if (res.data.orderListVO.status == 0) {
              res.data.orderListVO.status = "正常";
            } else if (res.data.orderListVO.status == 1) {
              res.data.orderListVO.status = "中止";
            } else if (res.data.orderListVO.status == 2) {
              res.data.orderListVO.status = "终止";
            } else if (res.data.orderListVO.status == 3) {
              res.data.orderListVO.status = "失效";
            }
            for (var i = 0; i < this.liveHosState.length; i++) {
              if (
                res.data.template.enterHospitalState ==
                this.liveHosState[i].dKey
              ) {
                res.data.template.enterHospitalState = this.liveHosState[
                  i
                ].dValue;
              }
            }
            this.getDoc(res.data.template.doctorId);
            this.main = res.data;
            this.baodanlist.push(res.data.orderListVO);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getDict(id) {
      this.axios
        .get("/dict?groupId=" + id)
        .then(res => {
          if (res.data.code == 200) {
            if (id == "12") {
              this.liveHosState = res.data.data;
            }
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getDoc(id) {
      this.axios
        .get("/doctor/" + id)
        .then(res => {
          if (res.data.code == 200) {
            this.docName = res.data.data.name;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    cancle() {
      this.$router.push({
        path: "userDetail",
        query: {
          mainId: this.$route.query.mainId,
          type: this.$route.query.type,
          id: this.$route.query.id,
          cardNum: this.$route.query.cardNum,
          mobile: this.$route.query.mobile,
          userName: this.$route.query.userName
        }
      });
    },
    dispath() {
      this.$router.push("userPath?mainId=" + this.$route.query.mainId);
    }
  },
  filters: {
    formatDate: function(time) {
      if (time) {
        let date = new Date(time);
        return ScondDay(date);
      } else {
        return "";
      }
    }
  }
};
</script>
 
<style lang="less" scoped>
.userDisPath {
  h3 {
    padding-top: 10px;
  }
  .info {
    h3 {
      padding: 0;
      margin: 0;
      padding-bottom: 10px;
      font-size: 16px;
    }
    .list {
      padding: 5px 0;
      display: flex;
      div {
        height: 24px;
        line-height: 24px;
      }
      .left {
        min-width: 100px;
        text-align: right;
        margin-right: 10px;
      }
      &.hos-state {
        .right {
          height: inherit;
          line-height: inherit;
          div {
            margin-bottom: 5px;
            &.item:last-child {
              margin: 0;
            }
          }
        }
      }
    }
  }
}
</style>
 